<template>
  <div>
    <!-- 分类页 -->

    <!-- 导航栏 -->
    <van-nav-bar title="分类" left-arrow class="bac" />
    <!-- 搜索栏 -->
    <van-search
      shape="round"
      background="#ff6040"
      placeholder="请输入搜索关键词"
    />
    <div class="catenav">
      <!--Sidebar 侧边导航 -->
      <van-sidebar v-model="activeKey" @change="onChange">
        <van-sidebar-item
          v-for="item in cateList"
          :key="item.id"
          :title="item.catename"
        />
      </van-sidebar>
      <!-- 侧边导航栏分类展示 
      参数：
      gutter	格子之间的间距，默认单位为px
      -->
      <van-grid :border="false" :gutter="10" :column-num="3">
        <van-grid-item
          v-for="item in secondList"
          :key="item.id"
          :to="'/list?id='+item.id"
        >
          <van-image
            :src="
              item.img
                ? $imgUrl + item.img
                : 'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1870521716,857441283&fm=26&gp=0.jpg'
            "
          />
          <p class="cateTitle">{{ item.catename }}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
// 引入接口列表
import { getCateList } from "../util/axios";
export default {
  data() {
    return {
      activeKey: 0,
      cateList: [],
      secondList: []
    };
  },
  mounted() {
    // 页面一加载就触发获取分类列表
    this.getCateInfo();
  },
  methods: {
    // 封装一个获取分类列表的接口
    getCateInfo() {
      getCateList().then(res => {
        // console.log(res, "分类列表");
        if (res.code == 200) {
          // 一级分类
          this.cateList = res.list;
          // 二级分类
          this.secondList = res.list[0].children;
        }
      });
    },
    // 封装一个左侧侧边栏切换的监听事件
    onChange() {
      // console.log(this.activeKey, "打印activeKey");
      // 当切换左侧侧边栏，动态获取二级分类
      this.secondList = this.cateList[this.activeKey].children;
    }
  }
};
</script>

<style lang="" scoped>
.bac {
  background: #ff6040;
}

.catenav {
  display: flex;
}

.van-grid {
  flex: 1;
}

.cateTitle {
  font-size: 13px;
  color: orangered;
}
</style>
